<template>
  <el-row>
    <el-col :span="3">
      <el-menu
          default-active="1"
          text-color="#fff"
          background-color="#545c64"
          :collapse="collapse"
      >
        <el-menu-item
            v-for="item in menu"
            :key="item.index"
            :index="item.index"
            @click="this.getPath(item.path)"
        >
          <span>{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="21">
      <el-container>
        <el-header
        ><h3>LeRun-管理端</h3>
          <el-popover :width="300">
            <template #reference>
              <el-avatar :size="50" :src="imgUrl" :preview-src-list="srcList"/>
            </template>
            <template #default>
              <div class="prover-header">
                <el-avatar
                    :size="70"
                    :src="imgUrl"
                    :preview-src-list="srcList"
                />
                <h3>
                  {{ currentUser.name }}
                </h3>
              </div>
              <div class="prover-footer">
                <el-button type="primary" @click="passwordDialogVisible = true"
                >修改密码
                </el-button
                >
                <el-button @click="avatarDialogVisible = true"
                >修改头像
                </el-button
                >
              </div>
            </template>
          </el-popover>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
        <el-footer></el-footer>
      </el-container>
    </el-col>
  </el-row>
  <el-dialog
      v-model="passwordDialogVisible"
      title="修改密码"
      width="30%"
      center
  >
    <span>
      <el-form class="form" :rules="rules" :model="form" ref="form">
        <el-form-item label="新密码" label-width="80px" prop="password">
          <el-input
              class="item"
              required="required"
              v-model="form.password"
              show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" label-width="80px" prop="aPassword">
          <el-input
              class="item"
              required="required"
              v-model="form.aPassword"
              show-password
          ></el-input>
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="passwordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="this.updatePassword(form)">
          修改
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="avatarDialogVisible" title="更改头像" width="30%" center>
    <el-upload
        action=""
        :file-list="fileList"
        :on-change="handleChange"
        list-type="picture-card"
        :auto-upload="false"
    >
      <el-icon>
        <Plus/>
      </el-icon>

      <template #file="{ file }">
        <div>
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
        </div>
      </template>
    </el-upload>

    <el-dialog v-model="imgDialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image"/>
    </el-dialog>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="avatarDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="uploadAvatar">上传</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {
  downloadAvatar,
  updateCurrentUser,
  uploadAvatar,
  lookCurrentUser,
} from "../api/user";

export default {
  data() {
    return {
      imgUrl: "",
      srcList: [],
      fileList: [],
      currentUser: {},
      //修改密码弹窗
      passwordDialogVisible: false,
      //修改头像·弹窗
      avatarDialogVisible: false,
      form: {id: "", password: "", aPassword: ""},
      menu: [
        {
          index: 1,
          path: "user",
          name: "用户管理",
        },
        {
          index: 2,
          path: "role",
          name: "角色管理",
        },
        {
          index: 3,
          path: "orders",
          name: "订单管理",
        },
        {
          index: 4,
          path: "address",
          name: "地址管理",
        },
        {
          index: 5,
          path: "login",
          name: "退出登录",
        },
      ],
      rules: {
        password: [
          {required: true, message: "密码不得为空!", trigger: "blur"},
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        aPassword: [
          {required: true, message: "第二次密码不得为空!", trigger: "blur"},
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getPath("user");
    this.downloadAvatar();
    this.lookCurrentUser(sessionStorage.getItem("user"));
  },
  methods: {
    //界面跳转
    getPath(name) {
      if (name === "login") {
        this.$confirm(`你真的要退出登录吗?退出后需要重新登录才能使用此系统`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          sessionStorage.clear();
          this.$router.push({name: name});
        });
      } else {
        this.$router.push({name: name});
      }
    },
    //下载头像
    downloadAvatar() {
      var id = sessionStorage.getItem("user");
      downloadAvatar(id).then((req) => {
        if (req.data === 0) {
          return;
        }
        let blob = new Blob([req.data], {type: "image/jpeg"});
        const imageUrl = URL.createObjectURL(blob);
        this.imgUrl = imageUrl;
        this.srcList.push(imageUrl);
      });
    },
    //头像上传
    uploadAvatar() {
      var param = new FormData();
      this.fileList.forEach((val, index) => {
        param.append("file", val.raw);
      });
      var id = sessionStorage.getItem("user");
      uploadAvatar(param, id).then((req) => {
        if (req.data.success) {
          this.avatarDialogVisible = false;
          this.$message({
            type: "success",
            message: "修改成功!",
            showClose: true,
          });
          this.downloadAvatar();
        } else {
          this.$message({
            type: "error",
            message: "修改失败!",
            showClose: true,
          });
        }
      });
    },
    //获取当前用户
    lookCurrentUser(uid) {
      lookCurrentUser(uid).then((req) => {
        this.currentUser = req.data.data;
      });
    },
    //修改密码
    updatePassword(user) {
      user.id = sessionStorage.getItem("user");
      updateCurrentUser(user).then((req) => {
        if (req.data.success) {
          this.passwordDialogVisible = false;
          this.$alert("修改成功!请重新登录!", "成功", {
            confirmButtonText: "确定",
            callback: (action) => {
              sessionStorage.clear();
              this.$router.push({name: "login"});
            },
          });
        } else {
          this.$message({
            type: "error",
            message: "修改失败!",
            showClose: true,
          });
        }
      });
    },
    handleChange(file, fileList) {
      //文件数量改变
      this.fileList = fileList;
    },
  },
};
</script>

<style lang="less" scoped>
.el-row {
  height: 680px;
}

.el-menu {
  /* color: white; */
  height: 680px;
}

.el-header {
  margin-bottom: 5%;
  background-color: #545c64;
  color: #fff;

  h3 {
    float: left;
  }

  .el-avatar {
    float: right;
  }
}

.prover-header {
  .el-avatar {
    margin-left: 40%;
  }

  h3 {
    text-align: center;
  }
}

.prover-footer {
  width: 80%;
  margin-left: 10%;

  .el-button {
    margin-left: 7%;
  }
}

.el-main {
  // position: absolute;
  // left: ;
  right: 0;
  margin-top: -6%;
  bottom: 0;
  // overflow-y: scroll;
}
</style>